<template>
  <div>
    <headers :headers="headers"></headers>
    <div class="section">
      <ul class="vip-rights">
        <li>可对客户感兴趣文章分析</li>
        <li>方便追踪客户信息，可加粉</li>
        <li>创建文章不限次数</li>
        <li>文章中可关联其他品牌</li>
      </ul>
      <div class="art-box p12 open-item mt20">
        <div class="clearfix top">
          <span class="left">VIP会员</span>
          <span class="right"><span class="color-red">99</span>元</span>
          <span class="select curr"></span>
        </div>
        <div class="clearfix bottom">
          <span class="left">权益说明</span>
          <img src="@/assets/images/icon-left.png" class="down right">
        </div>
        <p class="desc" style="display:block;">我需要三件东西：爱情友谊和图书。然而这三者之间何其相通！炽热的爱情可以充实图书的内容，图书又是人们最忠实的朋友。</p>
      </div>
      <div class="art-box p12 open-item mt20">
        <div class="clearfix top">
          <span class="left">小团长</span>
          <span class="right"><span class="color-red">99</span>元</span>
          <span class="select"></span>
        </div>
        <div class="clearfix bottom">
          <span class="left">权益说明</span>
          <img src="@/assets/images/icon-left.png" class="down right">
        </div>
        <p class="desc">我需要三件东西：爱情友谊和图书。然而这三者之间何其相通！炽热的爱情可以充实图书的内容，图书又是人们最忠实的朋友。</p>
      </div>
      <div class="art-box p12 open-item mt20">
        <div class="clearfix top">
          <span class="left">合伙人</span>
          <span class="right"><span class="color-red">99</span>元</span>
          <span class="select"></span>
        </div>
        <div class="clearfix bottom">
          <span class="left">权益说明</span>
          <img src="@/assets/images/icon-left.png" class="down right">
        </div>
        <p class="desc">我需要三件东西：爱情友谊和图书。然而这三者之间何其相通！炽热的爱情可以充实图书的内容，图书又是人们最忠实的朋友。</p>
      </div>

      <div class="btn-box" style="margin:60px 0 12px;">
        <div class="btn btn-bg-blue btn-h36">微信支付</div>
      </div>
      <p style="color:#999;font-size:12px;text-align:center;">开通会员后，不支持退款</p>
    </div>
  </div>
</template>

<script>
import Headers from '@/components/Headers'

export default {
  name: 'VipOpen',
  data () {
    return {
      headers: {
        left: require('@/assets/images/icon-close.png'),
        title: '开通会员',
        right: '会员说明'
      }
    }
  },
  components: {
    Headers
  }
}
</script>
